<template>
	<view class="nav_index" @click="handleCloseTips">
		<scroll-view :style="{ height: scrollsettingHight }" :scroll-y="true" :refresher-enabled="isAllowRefresh"
			:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			refresher-background="#2C2C2C">
			<view class="main" style="padding-bottom: 80rpx;">
				<view class="header">
					<view class="header_left">
						<image :src="userinfo.avatar ? userinfo.avatar : '/static/mine.png'" mode="" @click="getPhoto">
						</image>
						<view class="infoName" @click="test">
							<view class="nickName">{{ userinfo.nick_name }}</view>
							<text style="flex: 1;">{{ userinfo.fullRoleName }}</text>
						</view>
					</view>
					<view class="header_right" @click="changeRole" v-if="showRoleBtn">
						<image src="@/static/images/index/switch.png" mode=""></image>
						切换角色
					</view>

					<!-- #ifdef MP-WEIXIN -->
					<view class="tipsOff"
						v-if="onlineStatus && (!offData.subscribe || offData.subscribe == 0 || !userinfo.openId)">
						<text>为保证及时接收维保通知，请关注梯无忧公众号</text>
						<text @click="toOfficialaccount">前往关注</text>
					</view>
					<!-- #endif -->
				</view>

				<view class="cardContent" v-if="onlineStatus"
					:style="{ marginTop: !offData.subscribe || offData.subscribe == 0 ? '74rpx' : 0 }">

					<list-card type="7" v-if="onlineStatus && workingList.length" :obj-map="signMap"
						:value="cardRoteList[6].data" :workingList="workingList"></list-card>

					<list-card v-if="findRoute('maintain_home_rescue_system')" type="9" :obj-map="signMap" :value="rescueMap"></list-card>
					<!-- 维保员统计 -->
					<list-card type="1" v-if="findRoute('maintain_home_user_sign')" :obj-map="signMap"
						:value="cardRoteList[0].data"></list-card>
					<!--    保养关注项      -->
					<list-card type="8" v-if="findRoute('maintain_home_maintenance_concern')"
						:value="cardRoteList[7].data" :obj-map="signMap"></list-card>
					<list-card type="2" @changeTab="changeTab" v-if="findRoute('maintain_home_today_plan')"
						:obj-map="todayPlanMap" :value="cardRoteList[1].data"></list-card>
					<list-card type="3" v-if="findRoute('maintain_home_user_approve')" :obj-map="approveMap"
						:value="cardRoteList[2].data"></list-card>
					<list-card type="4" v-if="findRoute('maintain_home_user_apply')" :obj-map="applyMap"
						:value="cardRoteList[3].data"></list-card>
					<!-- 维保经理统计 -->
					<list-card type="5" v-if="findRoute('maintain_home_plan_count')" :obj-map="planMap"
						:value="cardRoteList[4].data"></list-card>
					<!-- 维保员统计 -->
					<list-card type="6" v-if="findRoute('maintain_home_plan_count_maintenance')" :obj-map="planMap"
						:value="cardRoteList[5].data"></list-card>
				</view>
				<offlineBlock v-if="!onlineStatus" @next="toMaintian" style="margin-top: 20%;"></offlineBlock>
			</view>

		</scroll-view>

		<rescueDialog :list="rescueList" v-if="showRescue" @closed="closeRescue"
			@updateElevatorStatus="updateElevatorStatus"></rescueDialog>

	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getRescueStatistics, getNoticeStatistics } from '@/apis/rescue.js';
import { getDistance } from '@/utils/tools.js';
import { rescueArrive } from '@/apis/elevator.js';
import { hanleToken, formatTime, getNowTime, getlocalinfo } from '@/utils/utils.js';
import ListCard from '../list_card.vue';
import { userSigin, reparirData, approve, getList, apply, getRescueOrders, plan, maintenancePlan, getWorking, getOverdueCount } from '@/apis/index.js';
import { getSiginDetail } from '@/apis/system.js';
import { getConfig } from '@/apis/sign.js';
import rescueDialog from './rescueDialog.vue';
import offlineBlock from '@/components/offline-block/offline-block.vue';
import { getOfficialaccount } from '@/apis/login.js';
import { preloadPlanDetails } from '@/utils/offline.js';

export default {
	components: { rescueDialog, ListCard, offlineBlock },
	props: {
		loadNum: Number,
		bottom: {
			type: Number
		},
		isRefresh: {
			type: Boolean
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	watch: {
		scrollTop(e) {
			if (e > 100) {
				this.isAllowRefresh = false;
			} else {
				this.isAllowRefresh = true;
			}
		}
	},
	data() {
		return {
			// loadNum: 1,
			rescueList: [],
			showRescue: false,
			// userInfo: {},
			workingList: [],
			scrollsettingHight: 0,
			isAllowRefresh: true,
			triggered: false,
			offData: { subscribe: 1 },
			cardRoteList: [
				{ route: 'maintain_home_user_sign', fun: userSigin, name: '考勤打卡', data: {} },
				{ route: 'maintain_home_today_plan', fun: reparirData, name: '我的任务', data: {} },
				{ route: 'maintain_home_user_approve', fun: approve, name: '我的申请', data: {} },
				{ route: 'maintain_home_user_apply', fun: apply, name: '我的审批', data: {} },
				{ route: 'maintain_home_plan_count', fun: plan, name: '统计', data: {} },
				{ route: 'maintain_home_plan_count_maintenance', fun: maintenancePlan, name: '统计', data: {} },
				{ route: 'maintain_home_plan_count_maintenance', fun: maintenancePlan, name: '作业中的工单', data: {} },
				{ route: 'maintain_home_maintenance_concern', fun: getOverdueCount, name: '保养关注项', data: {} }
			],

			todayPlanMap: {
				toStart: '待开始',
				underway: '进行中',
				finished: '已完成'
			}, // 今日任务
			approveMap: {
				approve: '审批中',
				pass: '审核通过',
				noPass: '审核不通过'
			}, // 我的审批
			applyMap: {
				pending: '待处理',
				processed: '已处理'
			},
			signMap: {
				normal: '正常打卡',
				beLate: '迟到',
				leaveEarly: '早退',
				absence: '缺卡',
				signStatus: '签到',
				signOutStatus: '签退'
			}, // 考勤
			planMap: {
				building: '任务总数',
				elevator: '电梯总数'
			},
			rescueMap: {
				unConfirm: 0,
				dispatching: 0,
				dispatched: 0,
				total: 0
			},
			hanleToken: hanleToken,
			showSignTips: false,
			latitude: '',
			longitude: ''
		};
	},

	computed: {
		...mapState('user', ['userinfo', 'routes']),
		...mapState('system', ['onlineStatus']),// 离线状态 ture 在线
		showRoleBtn() {
			let flag = false;
			let list = hanleToken('get', 'userCompanyInfo');

			if (list.length === 1) {
				if (list[0].roleList.length > 1) {
					flag = true;
				} else {
					flag = false;
				}
			} else {
				flag = true;
			}
			return flag;
		}
	},
	created() {
		console.log('第一次进入页面', this.isRefresh, 888);
		let config = uni.getSystemInfoSync();
		this.scrollsettingHight = (config.windowHeight - 55) + 'px';
	},

	methods: {
	
		...mapActions('user', ['handleRreshToken', 'getRoutes']),
		handleCloseTips() {
			console.log(999); 
			uni.$emit('tooltipsClose');
		},
		postErr(code) {
			if (code == 404) {
				this.http.post('/xxxda');
			} else {
				this.http.get('/test/testErrorCode', {

				}, 1);
			}
		},
		test() {

		},

		updateElevatorStatus(res) {
			if (res.planId) {
				this.rescueList.forEach(item => {
					item.list.forEach(e => {
						if (e.planId == res.planId) {
							e.status = res.status;
							e.statusDesc = res.statusDesc;
						}
					});
				});
			}
		},
		async initData() {
			console.log('initData-nav_bar', getApp().globalData.indexLauch);
			if (!this.onlineStatus) {
				this.triggered = false;
				// 离线
				return;
			}
			try {
				// await this.handleRreshToken();
				if (this.userinfo.user_id && !getApp().globalData.localListen) {
					getApp().globalData.localListen = true;

					// #ifdef MP-WEIXIN
					this.openLocalLin();
					// #endif
				}
				if (!this.routes || this.routes.length == 0) {
					await this.getRoutes();
				}
				// #ifndef H5   
				this.offData = await this.initOfficialaccount(this.userinfo.user_id);
				// #endif
				// console.log('routes', this.routes);
				this.fetchCardData();

				if (this.findRoute('maintain_home_rescue_system')) {
					this.getRescueData();
				}

				// 作业中工单
				getWorking().then(res => {
					this.workingList = res.data || [];
				});
				await this.getLocationFun();
				await this.getConfig();
				this.rescueList = await this.getRescueOrders();
				this.getDateList();
				console.log('作业中工单', this.rescueList);
				if (this.rescueList && this.rescueList.length == 1 && this.rescueList[0].list && this.rescueList[0].list.length == 1) {
					this.getRescueOrder();
				}

				if (!getApp().globalData.indexLauch) {
					if (this.rescueList.length) {
						this.showRescue = true;
						return;
					} else {
						this.showRescue = false;
					}
				} else {
					if (!this.rescueList.length) {
						this.showRescue = false;
					} else {
						// this.showRescue = true;
					}
					return;
				}

				this.showTips();
			} catch (error) {
				console.log('initData-nav_bar', error);
				this.triggered = false;
			}
		},

		getConfig() {
			return new Promise((resolve) => {
				getConfig()
					.then((res) => {
						this.systemconfig = res.data || {};
						resolve();
					})
					.catch(() => {
					});
			});
		},

		// 自动签到，查询已出发工单 status==3
		async getRescueOrder() {
			console.log('作业中工单', this.systemconfig);
			if (this.systemconfig.rescueSignConfig && this.systemconfig.rescueSignConfig.autoSignIn) {
				// 开启了自动签到
				for (let i = 0; i < this.rescueList.length; i++) {
					for (let j = 0; j < this.rescueList[i].list.length; j++) {
						if (this.rescueList[i].list[j].status == 3) {
							const order = this.rescueList[i].list[j];
							order.latitude = this.rescueList[i].latitude;
							order.longitude = this.rescueList[i].longitude;

							let localInfo = await this.getLocalInfo();
							if (!localInfo.latitude) {
								uni.hideLoading();
								uni.showModal({
									title: '提示',
									content: '请打开定位，再签到',
									showCancel: false,
								});
								return;
							}
							// 计算是否范围内打卡
							let distance = getDistance(
								localInfo.latitude,
								localInfo.longitude,
								order.latitude,
								order.longitude
							);
							console.log('getRescueOrder', distance,this.systemconfig.rescueSignConfig.distanceRange);
							if (distance < this.systemconfig.rescueSignConfig.distanceRange) {
								// 在范围内 自动打卡
								this.signOrder(order);
							}
						
							return;
						}
					}
				}
			}
		},

		// 确认到达
		async signOrder(order) {
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签到',
					showCancel: false,
				});
				return;
			}
			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				order.latitude,
				order.longitude
			);
			let address = {};
			try {
				address = await getlocalinfo(localInfo.latitude, localInfo.longitude);
				console.log('address', address);
			} catch (error) {
				console.log('error', error);
			}

			let signStatus = 1;
			if (!localInfo.latitude) {
				// this.locationError = '无定位';
			}
			if (distance > this.$config.maxDistance) {
				signStatus = 2;
				// this.locationError = '偏离项目定位';
			} else {
				// this.locationError = '正常';
			}

			rescueArrive({
				signStatus,
				locationAddress: address.result.address,
				latitude: localInfo.latitude,
				longitude: localInfo.longitude,
				planId: order.planId,
				userId: this.userinfo.user_id,
			}).then(() => {
				order.status = 4;
				order.statusDesc = '已到达';
				uni.showModal({
					title: '提示',
					content: '检测到已到达救援任务项目地点，已为您自动签到',
					confirmText: '详情',
					cancelText: '知道了',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: `/subpages/rescue/rescueDetail?planId=${order.planId
								}&elevatorId=${order.elevatorId > 0 ? order.elevatorId : ''
								}`,
							});
						}
					}
				});
			});
		},
		openLocalLin() {
			console.log('openLocalLin');
			uni.startLocationUpdateBackground({
				type: 'gcj02',
				success: (suc) => {
					console.log('startLocationUpdate-suc', suc);

					if (suc.errMsg) {

					} else {
						uni.onLocationChange((res) => {
							// console.log('location change', res)
							getApp().globalData.localinfo = {
								...res,
								time: new Date().getTime(),
								onChange: true// 实时更新
							};
						});
					}
				},
				fail: (err) => {
					console.log('startLocationUpdate-fail', err);

					uni.getSetting({
						success: res => {
							console.log('getSetting-suc', res.authSetting);

							if (res.authSetting['scope.userLocation'] !== undefined && !res.authSetting['scope.userLocationBackground']) {
								// 用户拒绝了授权
								uni.showModal({
									title: '提示',
									content: '您还没有开启小程序离开后位置定位权限，这将会影响救援任务调度，请前往开启',
									success: res => {
										if (res.confirm) {
											// 跳转设置页面
											uni.openSetting({
												success: res => {
													if (res.authSetting['scope.userLocationBackground']) {
														console.log(111);
													} else {
														// 没有允许定位权限
														uni.showToast({
															title: '您拒绝了后台定位权限',
															icon: 'none'
														});
													}
												}
											});
										}
									}
								});
							} else {
								console.log(222);
							}
						},
						fail: err => {
							console.log('getSetting-fail', err);
						}
					});
				}
			});
		},
		// 下拉控件触发
		onPulling() {
			this.triggered = true;
		},
		// 下拉触发
		onRefresh() {
			this.triggered = true;
			this.initData();
		},

		closeRescue() {
			this.showRescue = false;
			this.showTips();
		},

		showTips() {
			if (!this.showSignTips && this.showRescue == false) {
				this.handSiginInfo();
			}

			// #ifndef H5 
			if (this.loadNum > 0) {
				this.showPublic();
			}
			// #endif
			getApp().globalData.indexLauch = true;
		},
		showPublic() {
			if (this.userinfo.user_id && !this.userinfo.openId && this.showRescue == false) {
				console.log();
				uni.showModal({
					title: '提示',
					content: '您还没有授权公众号消息推送，将无法获取任务消息提醒，是否前往授权？',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../setOpenid/setOpenid?type=1'
							});
						}
					}
				});
			}
			uni.$emit('loadNum');
		},

		// 获取进行中救援工单
		getRescueOrders() {
			return new Promise((resove, reject) => {
				getRescueOrders({
					userId: this.userinfo.user_id,
					latitude: this.latitude,
					longitude: this.longitude
				})
					.then((res) => {
						let num = 0;

						let list = res.data || [];
						for (let i = 0; i < list.length; i++) {
							num = num + list[i].list.length;
							for (let j = 0; j < list[i].list.length; j++) {
								list[i].list[j].typeStatus = 3;
								if (list[i].list[j].planContentUsers) {
									list[i].list[j].planContentUsers.forEach(item => {
										if (item.signUser) {
											item.isPlanStatus = item.signUser.isPlanStatus;
											item.isTakePartIn = item.signUser.isTakePartIn;
										}
									});
								}

								list[i].list[j].signUsers = list[i].list[j].planContentUsers || [];
							}
						}
						let arr = list;
						resove(arr);
					})
					.catch((err) => {
						resove();
					});
			});
		},

		async fetchCardData() {
			let requestFunList = this.cardRoteList.filter((item, index) => {
				return this.findRoute(item.route) == true;
			});
			uni.showLoading({
				title: '加载中',
				icon: 'loadding',
				mark: true
			});
			let all = requestFunList.map(e => {
				return e['fun']();
			});
			// console.log(requestFunList, all);
			await Promise.all(all).then(res => {
				// 取消下拉刷新状态
				this.triggered = false;
				uni.hideLoading();
				try {
					requestFunList.forEach((v, index) => {
						this.cardRoteList.forEach(j => {
							// console.log(v,j);
							if (v.name == j.name && v.route == j.route) {
								this.$set(j, 'data', res[index].data);
							}
						});
					});
				} catch (err) {
					console.log(err);
				}
			});
		},

		async getRescueData() {
			let rescueStatistics = await getRescueStatistics();
			let noticeStatistics = await getNoticeStatistics();
			let rescueMap = {
				unConfirm: noticeStatistics.data.unConfirm || 0,
				dispatching: rescueStatistics.data.dispatching || 0,
				dispatched: rescueStatistics.data.dispatched || 0,
				total: rescueStatistics.data.total || 0
			};
			this.rescueMap = rescueMap;
		},

		// 获取位置
		getLocationFun() {
			return new Promise((resolve, reject) => {
				if (getApp().globalData.localinfo.latitude) {
					if (
						new Date().getTime() - getApp().globalData.localinfo.time <=
						1000 * 60 * 2
					) {
						this.latitude = getApp().globalData.localinfo.latitude;
						this.longitude = getApp().globalData.localinfo.longitude;

						resolve(true);
						return;
					}
				}
				// #ifdef H5 
				resolve(false);
				// #endif
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						getApp().globalData.localinfo = {
							...res,
							time: new Date().getTime(),
						};

						resolve(true);
					},
					fail: (err) => {
						resolve(false);
					},
				});
			});
		},

		changeRole() {
			if (!this.onlineStatus) {
				uni.showToast({
					title: '网络离线,无法进行次操作',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/login/companySelect?phone=' + this.userinfo.phone
			});
		},
		// 去立即报障
		toDisabilities() {
			uni.navigateTo({
				url: '/pageModules/barrierSearch/searchBg'
			});
		},

		// 获取日期数据
		handSiginInfo() {
			let date = formatTime(new Date().getTime(), '-', true)
				.split(' ')[0]
				.replace(/[-]/g, '');
			let month = formatTime(new Date().getTime(), '-', true).split('-')[1];
			var result = month;
			if (Number(month) < 10) {
				result = month.replace('0', '');
			}

			getSiginDetail({
				date: date
			}, false).then(res => {
				if (res.code == 200) {
					let userSignTime = res.data.userSignTime;
					this.$store.commit('addSign', true);
					if (res.data.userSignDate) {
						// console.log('走了这里吗?');
						return;
					}
					if (new Date().getTime() > userSignTime) {
						// 当前时间大于上班时间为迟到
						this.showSignTips = true;
						uni.showModal({
							title: '提示',
							content: '已超过打卡时间是否打卡?',
							success: (res) => {
								this.showSignTips = false;
								if (res.confirm) {
									uni.navigateTo({
										url: '/pageModules/signPage/siginIndex?month=' + result
									});
								}
							},
							fail: (err) => {
								this.showSignTips = false;
							}
						});
					}
				} else {
					this.$store.commit('addSign', false);
				}
			}).catch(err => {
				// console.log("考勤错误",err)
				this.$store.commit('addSign', true);
			});
		},
		changeTab(res) {
			console.log('这里是父组件');
			this.$emit('changeTab', res);
		},
		// 更换图片
		getPhoto() {
			if (!this.onlineStatus) {
				uni.showToast({
					title: '网络离线,无法进行次操作',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: '/pageModules/personalInfo/index?id=' + this.userinfo.user_id
			});
		},
		// 获取code解析是否关注过公众号
		initOfficialaccount(userId) {
			return new Promise((resolve, reject) => {
				getOfficialaccount({
					userId
				})
					.then(res => {
						if (res.code === 200) {
							resolve(res.data);
						} else {
							reject('');
						}
					})
					.catch(err => {
						reject(err);
					});
			});
		},

		// 跳往公众号
		toOfficialaccount() {
			if (this.userinfo.user_id && !this.userinfo.openId && this.showRescue == false) {
				uni.showModal({
					title: '提示',
					content: '您还没有授权公众号消息推送，将无法获取任务消息提醒，是否前往授权？',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../setOpenid/setOpenid'
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/index/components/indexWebView?url=' + 'https://mp.weixin.qq.com/s/Q3eCZGi6y9pv5z21TIcVhg',
					fail(res) {
						console.log(res);
					}
				});
			}
		},

		toMaintian(res) {
			uni.$emit('switchTab', res == 1 ? 3 : 1);
		},

		// 缓存今日保养工单列表
		getDateList() {
			const nowDate = getNowTime();
			getList({
				beginTime: nowDate + ' 00:00:00',
				endTime: nowDate + ' 23:59:59',
				typeStatus: 1,
				current: 1,
				size: 4
			}).then(res => {
				uni.setStorage({
					key: 'offline_orders',// 离线今日工单缓存数据
					data: res.data || {},
					success: () => {
						preloadPlanDetails();
					},
					fail: () => {
						preloadPlanDetails();
					}
				});
			});
		},

	}
};
</script>

<style lang="scss" scoped>
.nav_index {
	background: #f3f6f8;
	// min-height: 100vh;
	height: 100%;
	// padding-bottom: 100rpx;

	.tipsOff {
		position: absolute;
		top: 76rpx;
		left: 0;
		width: 100%;
		z-index: 97;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #fffadf;

		text:nth-child(1) {
			display: inline-block;
			font-size: 26rpx;
			color: #ff7505;
		}

		text:nth-child(2) {
			display: inline-block;
			width: 136rpx;
			height: 44rpx;
			background: #ff7505;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 0 10rpx;
			line-height: 44rpx;
		}
	}

	.header {
		display: flex;
		font-size: 24rpx;
		height: 74rpx;
		padding: 8rpx 20rpx;
		justify-content: space-between;
		background-color: #2c2c2c;
		color: #fff;
		box-sizing: border-box;
		align-items: center;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;

		.header_left,
		.header_right {
			display: flex;
		}

		.header_left {
			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 12rpx;
				border-radius: 50%;
				margin-bottom: 8rpx;
				background-color: #f3f6f8;
			}

			.infoName {
				display: flex;
				align-items: center;
				flex: 1;

				text {
					border-radius: 4rpx;
					font-size: 22rpx;
					padding: 0rpx 8rpx;
					margin-left: 16rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
				}

				.nickName {
					font-size: 26rpx;
					font-weight: 600;
					color: #ffffff;
					height: 36rpx;
				}
			}
		}

		.header_right {
			width: 200rpx;
			display: flex;
			align-items: center;
			height: 100%;
			justify-content: flex-end;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 4rpx;
			}
		}
	}

	.cardContent {
		padding: 8rpx 20rpx 0 20rpx;
		margin-bottom: 78rpx;

		.cardItem {
			background-color: #fff;
			border-radius: 8rpx;
			margin: 16rpx 0;

			.header {
				display: flex;
				justify-content: space-between;
				padding: 18rpx 32rpx 16rpx 32rpx;
				align-items: center;
				border-bottom: 2rpx solid #eeeeee;

				.header_left {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					display: flex;

					image {
						margin-right: 12rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.main {
				.main_item {
					padding: 32rpx 32rpx 22rpx 0rpx;

					.title {
						border-left: 4rpx solid #0091ff;
						padding-left: 32rpx;
						margin-bottom: 16rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
					}
				}

				.subMain {
					padding-left: 32rpx;
					display: flex;

					.subMain_item {
						display: flex;
						flex: 1;
						align-items: center;
						flex-direction: column;
						border-right: 2rpx solid #eeeeee;

						.count {
							color: #333;
							font-size: 32rpx;
							font-weight: 600;
						}

						.bottom {
							font-size: 24rpx;
							color: #666;
						}
					}

					&:nth-last-child(1) {
						border-right: none;
					}
				}
			}
		}
	}

	.guarantee {
		// height: 80rpx;
		padding: 18rpx 20rpx 16rpx 32rpx;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 2rpx 8rpx 6rpx rgba(30, 67, 95, 0.08);
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		// bottom: 120rpx;
		left: 0;
		width: 710rpx;
		box-sizing: border-box;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
		}

		.title {
			display: flex;
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.btn {
			width: 156rpx;
			background: #0091ff;
			border-radius: 4rpx;
			color: #fff;
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}
	}

	.footer {
		display: flex;
		height: 98rpx;
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.footer_item {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 20rpx;
		}

		.active {
			color: #0091ff;
		}
	}
}
</style>
